import './index.scss'
import store from "../../../store";//哪个组件需要用到store的数据就在哪个组件引入
import {observer} from 'mobx-react'
import {Button, Col, Form, Image, Input, message, Radio, Row, Select, Upload} from "antd";
import {CloseCircleOutlined, FormOutlined, UploadOutlined} from "@ant-design/icons";
import React, {useEffect, useRef, useState} from "react";
import {useNavigate} from "react-router-dom";

const {Option} = Select;

const ContentForm = ({
                         row,
                         labels,
                         setLabels,
                         author,
                         setIsAuthorModalOpen,
                         setAuthor,
                         setIsLabelModalOpen,
                         submit,
                         setIsSetVideoModalOpen
                     }) => {
    const navigate = useNavigate()
    const [img, setImg] = useState(row.cover||'');
    console.log(row.cover)
    const [imgFile,setImgFile]=useState({})
    const file = useRef(null)
    // 编辑表单提交
    const onFinish = (values) => {
        values.label = labels.join(',')
        values.writer = author
        values.price = Number(values.price)
        values.costPrice = Number(values.costPrice)
        values.weight = parseInt(values.weight)
        values.episodes = parseInt(values.episodes)
        values.cover=img
        console.log('Success:', values);
        submit(values,imgFile)
    };
    // 编辑表单提交失败
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    //取消编辑
    const cancel = () => {
        navigate(-1)
    }
    // 删除标签
    const delLabel = (label) => {
        let _labels = [...labels]
        labels.forEach((v, i) => {
            if (v === label) {
                _labels.splice(i, 1)
                setLabels(_labels)
            }
        })
    }
    // 点击选择作者显示弹框
    const showAuthModal = () => {
        setIsAuthorModalOpen(true);
    };
    //选择作者input框值改变
    const changeAuthor = (ev) => {
        setAuthor(ev.target.value)
    }
    // 点击选择作者显示弹框
    const showLabelModal = () => {
        setIsLabelModalOpen(true);
    };
    // 点击设置视频显示弹框
    const showSetVideoModal = (id) => {
        console.log(id)
        setIsSetVideoModalOpen(true);
    };
    //上传封面handler
    const uploadFile = (e) => {
        const fileData = e.target.files[0];
        console.log(fileData)
        // store.content.uploadCover(fileData)
        setImgFile(fileData)
        const pattern = /^image/;
        if (!pattern.test(fileData.type)) {
            message.error("图片格式不正确")
            return
        }
        const reader = new FileReader();
        reader.readAsDataURL(fileData);
        reader.onload = () => {
            setImg(reader.result);
        }
    }
    useEffect(() => {
        if (store.channel.channels.length === 0) {
            store.channel.getAllChannel()
        }
    }, [])

    return <Form
        name="basic"
        labelCol={{
            span: 2,
        }}
        wrapperCol={{
            span: 10,
        }}
        initialValues={row}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        id={'contentForm'}
    >
        <Form.Item
            label="App"
            name="app"
            rules={[
                {
                    required: true,
                    message: 'Please input your username!',
                },
            ]}
        >
            <Radio.Group buttonStyle="solid">
                <Radio.Button value="小黑早教">小黑早教</Radio.Button>
            </Radio.Group>
        </Form.Item>
        <Form.Item
            name="channel"
            label="频道"
            rules={[
                {
                    required: true,
                },
            ]}
        >
            <Select
                placeholder="请选择频道"
                allowClear
            >
                <>
                    {
                        store.channel.channels.map(v => {
                            return <Option value={v.channelName} key={v.channelId}>{v.channelName}</Option>
                        })
                    }
                </>
            </Select>
        </Form.Item>
        <Form.Item
            label="封面"
            name="cover"
        >
            <div>
                {(() => {
                    if (img) {
                        return <img
                            src={img}
                            alt="avatar"
                            style={{
                                width: '60px',
                                marginRight: '20px'
                            }}/>
                    } else {
                        return ''
                    }
                })()
                }
                <input ref={file} type="file" style={{display: 'none'}} onChange={(e) => uploadFile(e)}/>
                <Button type={"primary"} onClick={() => {
                    file.current.click()
                }
                }>选择封面</Button>
            </div>
        </Form.Item>
        <Form.Item
            label="名称"
            name="name"
            rules={[
                {
                    required: true,
                    message: 'Please input your name!',
                },
            ]}
        >
            <Input/>
        </Form.Item>
        <Form.Item
            wrapperCol={{
                span: 13
            }}
            rules={[
                {
                    required: true,
                    message: 'Please input your name!',
                },
            ]}
            style={{marginBottom: 0}}
        >
            <Form.Item
                label="writer"
                labelCol={{span: 4}}
                style={{
                    display: 'inline-block',
                    width: 'calc(92%)',
                }}
                rules={[
                    {
                        required: true,
                        message: 'Please input your name!',
                    },
                ]}
            >
                <Input value={author} onChange={changeAuthor.bind()}/>
            </Form.Item>
            <Form.Item
                style={{
                    display: 'inline-block',
                    width: 'calc(8%)',
                }}
            >
                <Button onClick={showAuthModal}>选择</Button>
            </Form.Item>
        </Form.Item>
        <Form.Item
            wrapperCol={{
                span: 12,
            }}
            style={{marginBottom: 0}}
        >
            <Form.Item
                label="售价"
                name="price"
                labelCol={{span: 8}}
                style={{
                    display: 'inline-block',
                    width: 'calc(50%)',
                }}
                rules={[
                    {
                        required: true,
                        message: 'Please input your name!',
                    },
                ]}
            >
                <Input/>
            </Form.Item>
            <Form.Item
                label="原价"
                name="costPrice"
                labelCol={{span: 8}}
                style={{
                    display: 'inline-block',
                    width: 'calc(50% - 8px)',
                }}
                rules={[
                    {
                        required: true,
                        message: 'Please input your name!',
                    },
                ]}
            >
                <Input/>
            </Form.Item>
        </Form.Item>
        <Form.Item
            label="状态"
            name="state"
            rules={[
                {
                    required: true,
                },
            ]}
        >
            <Radio.Group buttonStyle="solid">
                <Radio.Button value="上架">上架</Radio.Button>
                <Radio.Button value="下架">下架</Radio.Button>
            </Radio.Group>
        </Form.Item>
        <Form.Item
            label="标签"
        >
            <div className={"clear labels"}>
                {labels.map((v, i) => <div key={i} className={"left label"}>
                    {v}
                    <CloseCircleOutlined className={"delLabel"} onClick={() => delLabel(v)}/>
                </div>)}
                <Button type="primary" onClick={showLabelModal}>添加标签</Button>
            </div>
        </Form.Item>
        <Form.Item
            label="权重"
            name="weight"
            rules={[
                {
                    required: true,
                    message: 'Please input your weight!',
                },
            ]}
        >
            <Input/>
        </Form.Item>
        <Form.Item
            label="集数"
            name="episodes"
            rules={[
                {
                    required: true,
                    message: 'Please input your weight!',
                },
            ]}
        >
            <Input/>
        </Form.Item>
        <Form.Item
            label="册集列表"
            wrapperCol={{
                span: 24,
            }}
        >
            <Row className={'volumeSetList'}>
                <Col className={'item'}>
                    <div className={'top'}>
                        <div>第1集</div>
                        <div>册集标题</div>
                        <FormOutlined className={'icon'} onClick={() => showSetVideoModal(1)}/>
                    </div>
                    <Image width={100}
                           src={"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Ffe%2F11%2F97%2Ffe119792285b42e687ebf4367f77c8de.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667467708&t=f250a0a76a390e652a8e7d302b64f987"}/>
                    <div className={'bottom'}>
                        链接：{'aaaaaaaaaaaaaaaaaaaaaaaaaa'}
                    </div>
                </Col>
            </Row>
        </Form.Item>
        <Form.Item
            wrapperCol={{
                offset: 2,
                span: 16,
            }}
        >
            <Button type="primary" htmlType="submit">
                提交
            </Button>
            <Button className={"cancel"} htmlType="button" onClick={cancel}>
                取消
            </Button>
        </Form.Item>
    </Form>
}
export default observer(ContentForm)